﻿@{
    ViewBag.Title = "GridView";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>GridView</h2>
<h2>My Grid Data</h2>
<table id="list"></table>
<div id="pager" style="text-align:center;">
</div>

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#list").jqGrid({
            url: '/Order/DisplayGridView/',
            datatype: 'json',
            mtype: 'POST',
            colNames: ['OrderID', 'CustomerID', 'EmployeeID', 'OrderDate',
                       'RequiredDate', 'Freight', 'ShippedDate', 'ShipVia',
                       'ShipName', 'ShipAddress', 'ShipCity', 'ShipRegion', 
                       'ShipPostalCode', 'ShipCountry'],
            colModel: [
              { name: 'OrderID', index: 'OrderId', width: 50, align: 'left', key:true },
              { name: 'CustomerID', index: 'CustomerID', width: 70, align: 'left' },
              { name: 'EmployeeID', index: 'EmployeeID', width: 80, align: 'left' },
              { name: 'OrderDate', index: 'OrderDate', width: 70, align: 'left', editable: true, edittype: 'date' },
              { name: 'RequiredDate', index: 'RequiredDate', width: 70, align: 'left' },
              { name: 'Freight', index: 'Freight', width: 50, align: 'left' },
              { name: 'ShippedDate', index: 'ShippedDate', width: 70, align: 'left' },
              { name: 'ShipVia', index: 'ShipVia', width: 50, align: 'left', editable: true, edittype: 'text' },
              { name: 'ShipName', index: 'ShipName', width: 80, align: 'left', editable: true, edittype: 'text' },
              { name: 'ShipAddress', index: 'ShipAddress', width: 120, align: 'left', editable: true, edittype: 'text' },
              { name: 'ShipCity', index: 'ShipCity', width: 70, align: 'left', editable: true, edittype: 'text' },
              { name: 'ShipRegion', index: 'ShipRegion', width: 70, align: 'left', editable: true, edittype: 'text' },
              { name: 'ShipPostalCode', index: 'ShipPostalCode', width: 70, align: 'left',editable: true, edittype: 'text' },
              { name: 'ShipCountry', index: 'ShipCountry', width: 70, align: 'left', editable: true, edittype: 'text' },
              ],
            editurl:'/Order/Edit/',
            height: 320,
            pager: jQuery('#pager'),
            rowNum: 20,
            rowList: [5, 10, 20, 50],
            sortname: 'OrderId',
            sortorder: "desc",
            viewrecords: true,
            caption: 'All Orders'
        });
        jQuery("#list").jqGrid('navGrid', '#pager', {
            edit: false,
            add: false,
            del: false,
            search: false
        });
        jQuery("#list").jqGrid('inlineNav', '#pager', {
            edit: true,
            editicon: "ui-icon-pencil",
            add: true,
            addicon: "ui-icon-plus",
            save: true,
            saveicon: "ui_icon-disk",
            cancel: true,
            canelicon: "ui-icon-cancel"
        });
    });
</script>